<template>
	<view class="detail-page" :class="{ 'has-footer': orderStatus === '已取消' || orderStatus === '已退款' }">
		<!-- 自定义顶部导航栏（匹配custom样式） -->
		<view class="top-nav">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">{{ isEvaluating ? orderData.serviceItem : (orderStatus + '订单') }}</text>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">○</text>
			</view>
		</view>
		<!-- 状态标签（已取消/已退款时显示） -->
		<view class="status-label" v-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<text class="status-text">{{ orderStatus }}</text>
		</view>
		<!-- 评价页面显示 -->
		<template v-if="isEvaluating">
			<!-- 服务评价区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">服务评价</text>
				<view class="store-evaluate">
					<image src="/static/store.png" class="store-thumb" mode="aspectFill" />
					<view class="store-info">
						<text class="store-name">{{ orderData.store }}</text>
						<view class="star-rating">
							<text 
								class="star" 
								v-for="(item, index) in 5" 
								:key="index"
								:class="{ active: index < rating }"
								@click="setRating(index + 1)"
							>★</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评语区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">评语(0-299字)</text>
				<textarea 
					class="comment-input" 
					v-model="comment" 
					placeholder="请留下您宝贵的意见和建议......."
					maxlength="299"
					@input="onCommentInput"
				></textarea>
				<text class="char-count">{{ comment.length }}/299</text>
			</view>
			
			<!-- 照片上传区域 -->
			<view class="evaluate-card">
				<text class="evaluate-title">照片(选填)</text>
				<view class="photo-upload">
					<view 
						class="photo-item" 
						v-for="(photo, index) in photos" 
						:key="index"
					>
						<image :src="photo" class="photo-img" mode="aspectFill" />
						<view class="photo-delete" @click="deletePhoto(index)">×</view>
					</view>
					<view class="photo-upload-btn" @click="uploadPhoto" v-if="photos.length < 9">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitEvaluate" :disabled="rating === 0">提交</button>
			</view>
		</template>
		<!-- 详情内容 -->
		<!-- 已取消/已退款订单的显示 -->
		<template v-else-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<!-- 订单信息卡片 -->
			<view class="detail-card">
				<text class="card-title">订单信息</text>
				<view class="detail-info">
					<text class="info-item">订单号: {{ orderData.orderNo }}</text>
					<text class="info-item">服务项目: {{ orderData.serviceItem }}</text>
					<view class="info-item store-item">
						<text>服务门店: {{ orderData.store }}</text>
						<text class="store-icon">✈</text>
					</view>
					<text class="info-item">下单时间: {{ orderData.orderTime }}</text>
					<text class="info-item">预约时间: {{ orderData.reserveTime }}</text>
					<text class="info-item">备注: </text>
				</view>
			</view>
			<!-- 订单详情卡片 -->
			<view class="detail-card">
				<text class="card-title">订单详情</text>
				<view class="amount-detail">
					<view class="amount-item">
						<text class="item-name">车辆精洗</text>
						<text class="item-value">¥39.90</text>
					</view>
					<view class="amount-item">
						<text class="item-name">车辆附加费用</text>
						<text class="item-value">0</text>
					</view>
					<view class="amount-divider"></view>
					<view class="amount-item">
						<text class="item-name">原价</text>
						<text class="item-value">¥59.90</text>
					</view>
					<view class="amount-item">
						<text class="item-name">店家优惠</text>
						<text class="item-value discount">- ¥20</text>
					</view>
					<view class="amount-item">
						<text class="item-name">优惠券</text>
						<text class="item-value discount">- ¥10</text>
					</view>
					<view class="amount-divider"></view>
					<view class="amount-item total">
						<text class="item-name">支付金额</text>
						<text class="item-value green">¥29.9</text>
					</view>
				</view>
			</view>
		</template>
		<!-- 其他状态的显示 -->
		<template v-else>
			<view class="detail-card">
				<view class="detail-header">
					<text class="order-no">订单号:{{ orderData.orderNo }}</text>
				</view>
				<view class="detail-info">
					<text class="service-item">服务项目: {{ orderData.serviceItem }}</text>
					<text class="service-store">服务门店: {{ orderData.store }}</text>
					<text class="order-time">下单时间: {{ orderData.orderTime }}</text>
					<text class="reserve-time">预约时间: {{ orderData.reserveTime }}</text>
					<text class="car-info">车辆: {{ orderData.carInfo }}</text>
				</view>
			<!-- 核销码（仅待使用显示） -->
			<view class="verify-code" v-if="currentTab === 2">
				<text class="code-label">核销码:</text>
				<text class="code-value">{{ orderData.verifyCode }}</text>
			</view>
			<!-- 金额明细 -->
			<view class="amount-detail">
				<text class="detail-title">订单详情</text>
				<view class="amount-item"><text class="item-name">车辆精洗</text><text class="item-value">¥39.90</text>
				</view>
				<view class="amount-item"><text class="item-name">车辆附加费用</text><text class="item-value">¥0</text></view>
				<view class="amount-item"><text class="item-name">原价</text><text class="item-value">¥59.90</text></view>
				<view class="amount-item"><text class="item-name">店家优惠</text><text class="item-value">-¥20</text></view>
				<view class="amount-item"><text class="item-name">优惠券</text><text class="item-value">-¥10</text></view>
				<view class="amount-item total">
					<text class="item-name">{{ orderData.amountType }}</text>
					<text class="item-value red">{{ orderData.amount }}元</text>
				</view>
			</view>
				<!-- 操作按钮 -->
				<view class="btn-group">
					<view class="btn gray" v-if="showBtn1" @click="handleBtn1">{{ btn1Text }}</view>
					<view class="btn blue" @click="handleBtn2">{{ btn2Text }}</view>
					<view class="btn gray" v-if="showBtn3" @click="contactService">联系客服</view>
				</view>
			</view>
		</template>
		<!-- 底部操作栏（已取消/已退款订单） -->
		<view class="footer-bar" v-if="orderStatus === '已取消' || orderStatus === '已退款'">
			<view class="footer-left" @click="contactService">
				<text class="service-icon">👤</text>
				<text class="service-text">联系客服</text>
			</view>
			<view class="footer-right">
				<button class="footer-btn" @click="handleBtn2">再来一单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: {},
				currentTab: 0,
				orderStatus: '',
				showBtn1: false,
				showBtn3: false,
				btn1Text: '',
				btn2Text: '',
				// 评价相关数据
				isEvaluating: false,
				rating: 0,
				comment: '',
				photos: []
			};
		},
		onLoad(options) {
			// 接收列表页传递的订单数据（序列化后解析）
			// 先解码再解析JSON
			this.orderData = JSON.parse(decodeURIComponent(options.orderData));
			this.setOrderStatus();
			this.setBtnConfig();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			setOrderStatus() {
				if (this.orderData.statusText === '待支付') {
					this.currentTab = 1;
					this.orderStatus = '待支付';
					this.showBtn3 = true;
				} else if (this.orderData.statusText === '待使用') {
					this.currentTab = 2;
					this.orderStatus = '待使用';
				} else if (this.orderData.statusText === '待评价') {
					this.currentTab = 3;
					this.orderStatus = '待评价';
				} else if (this.orderData.statusText === '已取消') {
					this.currentTab = 0;
					this.orderStatus = '已取消';
				} else if (this.orderData.statusText === '已退款') {
					this.currentTab = 0;
					this.orderStatus = '已退款';
				} else if (this.orderData.statusText === '已完成') {
					this.currentTab = 0;
					this.orderStatus = '已完成';
				}
			},
			setBtnConfig() {
				if (this.orderStatus === '已取消' || this.orderStatus === '已退款') {
					// 已取消/已退款订单不显示按钮组，使用底部操作栏
					this.showBtn1 = false;
					this.showBtn3 = false;
					this.btn2Text = '再来一单';
				} else {
					switch (this.currentTab) {
						case 1: // 待支付
							this.showBtn1 = true;
							this.btn1Text = '取消订单';
							this.btn2Text = '立即支付';
							break;
						case 2: // 待使用
							this.showBtn1 = true;
							this.btn1Text = '申请退款';
							this.btn2Text = '扫码结算';
							this.showBtn3 = true;
							break;
						case 3: // 待评价
							this.showBtn1 = true;
							this.btn1Text = '立即评价';
							this.btn2Text = '再来一单';
							this.showBtn3 = true;
							break;
						case 0: // 全部订单的已取消/已退款/已完成
							this.showBtn1 = false;
							this.btn2Text = this.orderData.btn2Text || '再来一单';
							this.showBtn3 = true;
							break;
					}
				}
			},
			handleBtn1() {
				// 原有按钮逻辑不变（可对接实际接口）
				if (this.btn1Text === '取消订单') {
					// 切换显示已取消订单内容
					this.orderData.statusText = '已取消';
					this.setOrderStatus();
					this.setBtnConfig();
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
				} else if (this.btn1Text === '申请退款') {
					// 切换显示已退款订单内容
					this.orderData.statusText = '已退款';
					this.setOrderStatus();
					this.setBtnConfig();
					uni.showToast({
						title: '退款申请已提交',
						icon: 'success'
					});
				} else if (this.btn1Text === '立即评价') {
					// 切换显示评价页面
					this.isEvaluating = true;
				}
			},
			handleBtn2() {
				if (this.btn2Text === '立即支付') {
					uni.showToast({
						title: '支付成功'
					});
					setTimeout(() => uni.navigateBack(), 1500);
				} else if (this.btn2Text === '扫码结算') {
					uni.scanCode({
						success: (res) => {
							uni.showToast({
								title: '核销成功'
							});
							setTimeout(() => uni.navigateBack(), 1500);
						}
					});
				} else if (this.btn2Text === '再来一单' || this.btn2Text === '重新下单') {
					uni.navigateTo({
						url: '/pages/order/create' // 可跳转到下单页
					});
				}
			},
			contactService() {
				uni.showToast({
					title: '已跳转客服页面'
				});
			},
			// 设置评分
			setRating(score) {
				this.rating = score;
			},
			// 评语输入
			onCommentInput(e) {
				this.comment = e.detail.value;
			},
			// 上传照片
			uploadPhoto() {
				uni.chooseImage({
					count: 9 - this.photos.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.photos = this.photos.concat(res.tempFilePaths);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			// 删除照片
			deletePhoto(index) {
				this.photos.splice(index, 1);
			},
			// 提交评价
			submitEvaluate() {
				if (this.rating === 0) {
					uni.showToast({
						title: '请选择评分',
						icon: 'none'
					});
					return;
				}
				
				// 这里可以调用后端API提交评价
				uni.showToast({
					title: '评价提交成功',
					icon: 'success',
					success: () => {
						setTimeout(() => {
							// 提交成功后，切换回订单详情页面
							this.isEvaluating = false;
							// 更新订单状态为已评价
							this.orderData.statusText = '待评价';
							this.setOrderStatus();
							this.setBtnConfig();
						}, 1500);
					}
				});
			}
		}
	};
</script>
<!-- 原有样式不变，确保与列表页风格统一 -->
<style scoped>
.detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 14px;
  color: #333;
}

.detail-page.has-footer {
  padding-bottom: 120rpx; /* 为底部操作栏留出空间（已取消/已退款订单） */
}

/* 评价页面样式 */
.evaluate-card {
  background-color: #fff;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.evaluate-title {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

/* 服务评价区域 */
.store-evaluate {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.store-thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  flex-shrink: 0;
}

.store-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.star-rating {
  display: flex;
  gap: 5px;
}

.star {
  font-size: 24px;
  color: #ddd;
  line-height: 1;
  cursor: pointer;
}

.star.active {
  color: #ffd700;
}

/* 评语输入区域 */
.comment-input {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #999;
}

/* 照片上传区域 */
.photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-item {
  position: relative;
  width: calc(33.333% - 7px);
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.photo-img {
  width: 100%;
  height: 100%;
}

.photo-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.photo-upload-btn {
  width: calc(33.333% - 7px);
  aspect-ratio: 1;
  border: 1px dashed #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #fafafa;
}

.plus-icon {
  font-size: 32px;
  color: #999;
  line-height: 1;
  font-weight: 300;
}

.upload-text {
  font-size: 12px;
  color: #999;
}

/* 提交按钮区域 */
.submit-section {
  padding: 20px 15px;
  background-color: #f5f5f5;
}

.submit-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #2c83f2;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
}

.submit-btn:disabled {
  background-color: #ccc;
  color: #999;
}

/* 顶部导航栏 */
.top-nav {
  height: 48px;
  line-height: 48px;
  background-color: #2c83f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0 30rpx;
  box-sizing: border-box;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  color: #fff;
  font-size: 48rpx;
  font-weight: 300;
  line-height: 1;
}

.nav-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
  text-align: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.nav-icon {
  color: #fff;
  font-size: 32rpx;
  line-height: 1;
}

/* 状态标签 */
.status-label {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin: 0 30rpx;
  border-radius: 0 0 16rpx 16rpx;
}

.status-text {
  color: #f00;
  font-size: 28rpx;
  font-weight: 500;
}

/* 详情卡片容器 */
.detail-card {
  background-color: #fff;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

/* 订单号区域 */
.detail-header {
  padding: 5px 0 15px;
  border-bottom: 1px solid #f0f0f0;
}

.order-no {
  color: #666;
  font-size: 13px;
}

/* 服务信息区域 */
.detail-info {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-info text {
  display: block;
  margin-bottom: 12px;
  line-height: 1.5;
}

.service-item {
  color: #333;
  font-weight: 500;
  font-size: 15px;
}

.service-store, .order-time, .reserve-time, .car-info {
  color: #666;
}

/* 核销码区域 */
.verify-code {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.code-label {
  color: #666;
  margin-right: 10px;
}

.code-value {
  color: #2c83f2;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  padding: 5px 10px;
  background-color: #f5f8ff;
  border-radius: 4px;
  flex: 1;
}

/* 金额明细区域 */
.amount-detail {
  padding: 15px 0;
}

.detail-title {
  display: block;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
  font-size: 15px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: #666;
  border-bottom: 1px dashed #f0f0f0;
}

.amount-item:last-child {
  border-bottom: none;
}

.amount-item.total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.amount-item.total .item-name {
  font-weight: 600;
  color: #333;
}

.item-value.red {
  color: #e53935;
  font-weight: 600;
}

.item-value.discount {
  color: #f00;
  font-weight: 500;
}

.item-value.green {
  color: #4caf50;
  font-weight: 600;
}

.amount-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 8px 0;
}

/* 已取消订单的订单信息样式 */
.info-item {
  display: block;
  color: #333;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.store-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-icon {
  color: #2c83f2;
  font-size: 18px;
  margin-left: 8px;
}

/* 底部操作栏 */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.service-icon {
  font-size: 40rpx;
  color: #2c83f2;
}

.service-text {
  font-size: 28rpx;
  color: #333;
}

.footer-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.footer-btn {
  background-color: #2c83f2;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 60rpx;
  font-size: 28rpx;
  font-weight: 500;
}

/* 按钮组区域 */
.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  padding-top: 10px;
}

.btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn.gray {
  background-color: #f5f5f5;
  color: #666;
}

.btn.blue {
  background-color: #2c83f2;
  color: #fff;
}
</style>